<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小米登录</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				font-size: 12px;
			}
			
			.header {
				width: 1130px;
				height: 100px;
				padding-left: 115px;
				padding-bottom: 18px;
			}
			
			.title {
				width: 200px;
				height: 100px;
				padding-top: 20px;
			}
			
			#bg {
				width: 100%;
				height: 588px;
				background-color: #14212B;
			}
			
			#bg #body {
				width: 1130px;
				height: 588px;
				margin-left: auto;
				margin-right: auto;
				background: url(img/denglu-banner.jpg) no-repeat;
				position: relative;
			}
			
			#bg #body .main {
				height: 524px;
				width: 400px;
				background: white;
				position: absolute;
				right: 0;
				top: 32px;
			}
			
			.main .login-main {
				height: 318px;
				width: 400px;
			}
			
			.login-main .login-header {
				height: 53px;
				width: 400px;
				text-align: center;
				font-size: 24px;
				padding-top: 30px;
				border-bottom: 1px solid #E0E0E0;
			}
			
			.login-header #zhanghao,
			#saoma {
				width: 198px;
				height: 24px;
				border-right: 1px solid #E0E0E0;
				float: left;
				line-height: 24px;
			}
			
			.login-header #zhanghao:hover,
			#saoma:hover {
				cursor: pointer;
			}
			
			.login-header #zhanghao {
				color: #FF6700;
			}
			
			#login-body {
				width: 100%;
				height: 440px;
				position: relative;
			}
			
			#login-body .login-box {
				height: 215px;
				width: 338px;
				margin: 0 auto;
				margin-top: 8px;
			}
			
			.login-box .username {
				width: 306px;
				height: 22px;
				margin-top: 15px;
				color: #333;
				padding: 13px 16px 13px 14px;
			}
			
			.login-box .password {
				width: 306px;
				height: 22px;
				margin-top: 15px;
				color: #333;
				padding: 13px 16px 13px 14px;
			}
			
			.login-box .button {
				width: 100%;
				height: 50px;
				line-height: 50px;
				background: #f56600;
				margin-bottom: 14px;
				cursor: pointer;
				color: white;
				font-size: 18px;
				margin-top: 15px;
				border: 0;
			}
			
			.login-box .need {
				height: 20px;
				width: 336px;
				text-align: center;
				color: #999999;
			}
			
			.login-box .need #mi-num,
			#forgetpwd {
				width: 155px;
				height: 100%;
				line-height: 20px;
				font-size: 14px;
			}
			
			.login-box .need #mi-num {
				float: left;
				text-align: right;
			}
			
			.login-box .need #forgetpwd {
				float: right;
				text-align: left;
			}
			
			.login-footer {
				width: 338px;
				height: 65.5px;
				position: absolute;
				top: 350px;
				left: 32px;
				border-top: 1px solid #E0E0E0;
			}
			
			.login-footer>div {
				width: 32px;
				height: 32px;
				float: left;
				margin: 22px 25px 0 25px;
			}
			
			.login-footer .qq {
				background: url(img/login1.png) no-repeat;
			}
			
			.login-footer .qq:hover {
				background: url(img/login1-QQ.png)no-repeat;
			}
			
			.login-footer .weibo {
				background: url(img/login2.png)no-repeat;
			}
			
			.login-footer .weibo:hover {
				background: url(img/login2-weibo.png)no-repeat;
			}
			
			.login-footer .zhifubao {
				background: url(img/login3.png)no-repeat;
			}
			
			.login-footer .zhifubao:hover {
				background: url(img/login3-zhifubao.png)no-repeat;
			}
			
			.login-footer .weixin {
				background: url(img/login4.png)no-repeat;
			}
			
			.login-footer .weixin:hover {
				background: url(img/login4-weixin.png)no-repeat;
			}
			
			.login-footer .footer-title {
				width: 84px;
				height: 19px;
				position: absolute;
				top: -10px;
				font-size: 14px;
				left: 130px;
				text-align: center;
				color: #949494;
				background-color: white;
			}
			
			#login-body2 {
				width: 400px;
				height: 235px;
				padding-top: 78px;
				display: none;
			}
			
			#login-body2 .erweima {
				padding-left: 110px;
			}
			
			#login-body2>p {
				text-align: center;
				color: #757575;
				font-size: 14px;
			}
			
			#login-body2>p>span {
				color: red;
			}
			
			.footer {
				width: 1349px;
				height: 80px;
				margin-top: 100px;
				text-align: center;
			}
			
			.footer ul {
				display: inline-block;
				list-style-type: none;
				height: 17px;
				text-align: center;
			}
			
			.footer ul li a {
				padding: 0 10px;
				text-decoration: none;
				color: #757575;
			}
			
			.footer ul li {
				float: left;
			}
			
			.footer p {
				height: 24px;
				padding: 10px;
				color: #757575;
			}
			
			#user-tishi {
				line-height: 20px;
				color: #FF6700;
				margin-top: 5px;
				display: none;
			}
			
			.icon-error {
				width: 14px;
				height: 14px;
				line-height: 14px;
				background: #FF6700;
				color: white;
				font-weight: bold;
				text-align: center;
				border-radius: 50%;
				margin: -1px 5px 0 0;
				overflow: hidden;
				display: inline-block;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>

		<div class="header">
			<div class="title">
				<img src="img/login-logo.png" />
			</div>
		</div>
		<div id="bg">
			<div id="body">
				<div class="main">
					<div class="login-main">
						<div class="login-header">
							<div id="zhanghao" onclick="zhanghao()">账号登录</div>
							<div id="saoma" onclick="saoma()">扫码登录</div>
						</div>
						<form id="tijiao">

							<div id="login-body">
								<div class="login-box">
									<div class="input-1">
										<input type="text" name="login-num" id="login-num" value="" class="username" placeholder="邮箱/手机号码/小米账号" /><br />
									</div>
									<div class="input-2">
										<input type="password" name="login-pwd" id="login-pwd" class="password" placeholder="密码" /><br />
									</div>
									<div id="user-tishi">
										<span class="icon-error">!</span>
										<span class="icon-con">请输入账号</span>
									</div>
									<div class="input-3">
										<input type="button" id="login-button" value="立即登录" class="button" />
									</div>
									<div class="need">
										<div id="mi-num">
											<a href="mi.register.html" style="text-decoration: none;color: #999;">注册小米账号</a>
										</div>
										<span>|</span>
										<div id="forgetpwd">忘记密码？</div>
									</div>
								</div>
								<div class="login-footer">
									<span class="footer-title">其他方式登录</span>
									<div class="qq">
									</div>
									<div class="weibo">
									</div>
									<div class="zhifubao">
									</div>
									<div class="weixin">
									</div>
								</div>
							</div>
						</form>

						<div id="login-body2">
							<div class="erweima">
								<img src="img/login-erweima.png" />
							</div>
							<p>请打开「设置 > 小米帐号 > 右上角扫一扫」扫码登录</p>
							<p>使用<span>小米商城APP</span>扫一扫</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<ul>
				<li>
					<a href="#">简体</a>|</li>
				<li>
					<a href="#">繁体</a>|</li>
				<li>
					<a href="#">English</a>|</li>
				<li>
					<a href="#">常见问题</a>
				</li>
			</ul>
			<p><span>小米公司版权所有-京ICP备10046444-
             	<img src="img/footer-img.png"/>京公网安备11010802020134号-京ICP证110507号</span></p>
		</div>

		<script type="text/javascript">
			//切换账号和二维码登录方式
			var body1 = document.getElementById("login-body");
			var body2 = document.getElementById("login-body2");

			function zhanghao() {
				body1.style.display = "block";
				body2.style.display = "none";
			}

			function saoma() {
				body1.style.display = "none";
				body2.style.display = "block";

			}
			//立即登录
			var login = document.getElementById("login-button");
			login.onclick = function logon() {
				var user = document.getElementById("login-num");
				var pwd = document.getElementById("login-pwd");
				if(user.value.trim() == "") {
					var uts = document.getElementById("user-tishi");
					uts.style.display = "block";
					user.style.borderColor = "#FF6700";
				} else if(pwd.value.trim() == "") {
					alert("请输入密码");
				}
				document.getElementById("tijiao").submit();
			}
		</script>
	</body>

</html>